<template>
    <div class="jianzhan-content">
        <Crumb name="入库"/>
        <div class="content">
            <Search>
                <el-input v-model="key" class="input" size="small" prefix-icon="el-icon-search"
                          placeholder="根据入库单查询"/>
                <el-input v-model="key1" class="input" size="small" prefix-icon="el-icon-search"
                          placeholder="根据船查询"/>
                <el-select v-model="belongModules" placeholder="Please Select Location" size="small">
                    <el-option
                            v-if="urlAvailible('shanqi/mor')"
                            label="Warehouse2"
                            value="1">
                    </el-option>
                    <el-option
                            v-if="urlAvailible('shanqi/weda')"
                            label="Weda"
                            value="2"
                    ></el-option>
                    <el-option
                            v-if="urlAvailible('shanqi/all')"
                            label="All"
                            value=""
                    ></el-option>
                </el-select>
                <el-button type="primary" size="small" @click="search">搜索</el-button>
                <a :href="url" class="link-btn" target="_blank">下载Excel</a>
            </Search>
            <div class="table-wrapper">
                <el-table border
                          stripe
                          row-key="id"
                          :cell-style="rowClass"
                          @expand-change="getPartDetail"
                          @filter-change="handleFilterChange"
                          :data="stockList"
                >
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table :data="props.row.partList" border>
                                <el-table-column
                                        prop="partsNumber"
                                        label="配件编号"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="denomination"
                                        label="中文名称"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="designation"
                                        label="英文名称"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="partsQuantity"
                                        label="数量"
                                >
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column label="入库单号" prop="stockInNum"/>
                    <el-table-column label="船号" prop="shipNumber"/>
                    <el-table-column label="放行日期" prop="releaseDate"/>
                    <!--<el-table-column label="出口单号" prop="exportNum"/>-->
                    <el-table-column label="入库日期" prop="stockInDateStr"/>
                    <el-table-column label="入库状态"
                                     prop="saveOrConfirm"
                                     column-key="timeOutStatus"
                                     :filters="[
                                        {text:'入库',value:0},
                                        {text:'未入库',value:1},
                                        {text:'无状态',value:9},
                                    ]"
                    >
                        <template slot-scope="scope">
                            {{scope.row.saveOrConfirm === 1 ? 'Stock' : 'Unstock'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="stock">
                            <el-button type="text" size="small" @click="showDetail(stock.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="入库详情" :visible.sync="dialogVisible" width="80%">
            <el-form :model="stock" ref="stock" :rules="rule" label-width="150px">
                <div class="flex">
                    <div class="flex-content">
                        <el-form-item label="用途" prop="exploit">
                            {{stock.exploitDesc}}
                        </el-form-item>
                        <el-form-item label="出口单号" prop="exportNum">
                            {{stock.exportNum}}
                        </el-form-item>
                        <el-form-item label="入库日期" prop="stockInDateStr">
                            {{stock.stockInDateStr}}
                        </el-form-item>
                        <el-form-item label="仓库" prop="warehouse">
                            {{stock.warehouseDesc}}
                        </el-form-item>
                    </div>
                    <div class="flex-content">
                        <!--<el-form-item label="出口方" prop="exporter">-->
                        <!--{{stock.exporterDesc}}-->
                        <!--</el-form-item>-->
                        <el-form-item label="船号" prop="shipNumber">
                            {{stock.shipNumber}}
                        </el-form-item>
                        <el-form-item label="入库单号">
                            {{stock.stockInNum}}
                        </el-form-item>
                        <el-form-item label="总箱数" prop="totalBoxes">
                            {{stock.totalBoxes}}
                        </el-form-item>

                    </div>
                </div>
                <Data-Base @deleteItem="deleteItem" :partList="partList" :edit="false"/>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import DataBase from '../../components/part/spDataBase'
    import {getStockInList, getStockInDetail, getStockInRecord} from "../../api/service";
    import {getWarehouseList} from "../../api/warehouse";
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import spMixins from '../../util/spMixins'
    import authMixin from '../../util/authMixins'
    import {baseURL} from "../../util";

    export default {
        name: "stock-out",
        mixins: [mixins, spMixins,authMixin],
        data() {
            return {
                list: [],
                belongModules: '1',
                timeOutStatus:'',
                workNoList: [],
                notExist: [],
                rule: {
                    stockInDateStr: [{required: true}],
                    exploit: [{required: true}],
                    exporter: [{required: true}],
                    exportNum: [{required: true}],
                    shipNumber: [{required: true}],
                    totalBoxes: [{required: true}],
                    warehouse: [{required: true}]
                },
                warehouseList: [],
                stock: {
                    stockInNum: '',
                    stockInDateStr: '',
                    stockOutDetails: [],
                    exploit: '',
                    exporter: '',
                    exportNum: '',
                    warehouse: '',
                    shipNumber: '',
                    totalBoxes: ''
                },
                key: '',
                key1: '',
                dialogVisible: false,
                editable: true,
                filterOption: []
            }
        },
        computed: {
            url() {
                return baseURL + `/statistical_report/export_excel_stock_in_shan_qi.file?belongModule=${this.belongModules}`
            },
            stockList() {
                return this.list;
            },
            stockinNum() {
                const {exploit, exporter, exportNum, shipNumber, totalBoxes} = this.stock;
                const e = ['CON', 'SP'];
                const exp = ['INLINE', 'SHCMAN'];
                return `MOR/${e[exploit] || ''}/${exp[exporter] || ''}${exportNum}/${shipNumber}/${totalBoxes}`
            }
        },
        created() {
            this._getStockInList();
            this.getWarehouseList()
        },
        methods: {
            rowClass({row}) {
                if (row.timeOutStatus) {
                    return {
                        background: "#c60023 50%",
                        color: 'white'
                    }
                }
            },
            handleFilterChange(filter) {

                Object.keys(filter).forEach((key) => {
                    this[key] = filter[key][0]
                });
                this.search()
            },
            async getWarehouseList() {
                const {status, data} = await getWarehouseList();
                if (status === ERROR_OK) {
                    this.warehouseList = data
                }
            },
            async getPartDetail(r) {
                if (r.partList) {
                    return
                }
                const {status, data} = await getStockInRecord(r.id);
                if (status === ERROR_OK) {
                    r.partList = data;
                    const index = this.list.findIndex(item => item.id === r.id);
                    this.list.splice(index, 1, r);
                }

            },
            async showDetail(stock) {
                this.dialogVisible = true;
                this.editable = false;
                const {status, data} = await getStockInDetail(stock.id);
                if (status === ERROR_OK) {
                    this.stock = stock;
                    this.partList = data.stockInDetailList.map(part => {
                        return {
                            ...part.spareParts,
                            number: part.partsQuantity
                        }
                    })
                }
            },
            search(){
                this.pageNum = 1;
                this._getStockInList()
            },
            async _getStockInList() {
                const {status, data} = await getStockInList({
                    // warehouse, belongModule, stockYear, stockMonth,pageNum,exploit,timeOutStatus
                    warehouse: 1,
                    belongModule: this.belongModules,
                    timeOutStatus:this.timeOutStatus,
                    pageNum:this.pageNum,
                    stockInNum:this.key,
                    shipNumber:this.key1
                });
                if (status === ERROR_OK) {
                    this.list = data.list;
                    this.total = data.total
                }
            },
            changePage(page){
                this.pageNum = page;
                this._getStockInList()
            },
            clear() {
                this.partList = [];
                this.stock = {
                    id: undefined,
                    warehouse: '',
                    stockInNum: '',
                    stockInDateStr: '',
                    stockOutDetails: [],
                    exploit: '',
                    exporter: '',
                    exportNum: '',
                    shipNumber: '',
                    totalBoxes: ''
                };
                this.$nextTick(() => {
                    this.$refs.file.value = ''
                })
            },
        },
        components: {
            Crumb, Search, DataBase
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .link-btn {
        @include linkBtn
    }

    .content {
        @include content
    }

    .flex {
        display: flex;
        .flex-content {
            flex: 1;
        }
    }

    .input {
        width: 50%;
    }
</style>